<template>
  <div>
    <el-menu
      :default-active="activePath"
      class="el-menu-vertical-demo"
      :collapse-transition="false"
      background-color="#304156"
      text-color="#fff"
      :collapse="isCollapse"
      router
    >
      
        <SideBarItem :content="item" v-for="(item,index) in routes" :key="index"></SideBarItem>
        
        

      
    </el-menu>
  </div>
</template>

<script>
import router from "@/router";
import SideBarItem from "./SideBarItem.vue"
import {
  mapState
} from "vuex"
export default {
  components:{
    SideBarItem
  },
  name:"sidebar",
  data() {
    return {
        activePath:"/",
        routes:[]
    };
  },
  watch:{
    $route(to){
      this.activePath = to.path
    }
  },
  computed: {
    ...mapState(["isCollapse"])
  },
  created() {
    this.activePath = this.$route.path;
    // 大框架侧边栏忽略掉login
    const whiteList = ["/login"]
    var arr = JSON.parse(JSON.stringify(router.options.routes.filter(ele =>!whiteList.includes(ele.path))))
    this.deepRoutes(arr)
    this.routes = arr;
    console.log(arr);
  },
  mounted() {},
  methods: {
    deepRoutes(arr,parentPath){
      arr.forEach(ele =>{
        
        if(ele.path.indexOf("/") != -1){ // 这是一级路径
            ele.fullPath1 = ele.path
        }else{
          ele.fullPath1 = parentPath+"/"+ele.path
          
        }
        if(ele.children){
          
          this.deepRoutes(ele.children,ele.fullPath1)
        }
      })
    },
    handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
  },
};
</script>

<style scoped lang="scss"></style>
